<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-24 11:10:28
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 12:46:41
 * @FilePath: /tuberculosis_screening_display_system/src/components/FlowChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-06 22:31:42
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 10:52:46
 * @FilePath: /tuberculosis_screening_display_system/src/components/Schedule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="p_default">
    <div class="chart-tool">
      <select class="select" v-model="type" @change="handleChange">
        <option value="1">阳性/异常数</option>
        <option value="2">阳性/异常率</option>
      </select>
    </div>

    <div
      ref="containerRef"
      class="chart-container"
      :style="{ height: height - 18 * 2 + 'px' }"
    ></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useGeneralChart } from "./hooks";

export default defineComponent({
  name: "FlowChart",
  props: {
    title: String,
    subTitle: String,
    data: {
      type: Array,
      default: [],
    },
    legend: {
      type: Array,
      default: [],
    },
    label: String,
    height: {
      type: Number,
      default: 200,
    },
  },
  setup(props, context) {
    const { containerRef } = useGeneralChart(props, context);
    const type = ref('1')

    function handleChange(event) {
      console.log('handleChange', event);
      
    }
    return {
      containerRef,
      type,
      handleChange
    };
  },
});
</script>

<style lang="scss" scoped>


.select {
  background-color: #366380;
  border: solid 1px #2af8fc;
  padding: 2px 8px;
  border-radius: 4px;
}
</style>

